<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 注册页面 </title>
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="../Common/css/ufun.css" type="text/css" rel="stylesheet" />
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<script src="../Common/js/tools.js"></script>
		<style type="text/css">
			body {
				font-family: "Source Han Sans CN";
				background-color: #fff;
				overflow-x: hidden;
				overflow-y: hidden;
			}

			#bgc {
				width: 100%;
				height: 100%;
				/* z-index: -1; */
				position: fixed;
				top: 0;
			}

			.reg-picture {
				text-align: center;
				margin: 20vw auto 0 auto;
			}

			@keyframes scaleDraw {

				/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
				0% {
					transform: scale(1);
					/*开始为原始大小*/
				}

				25% {
					transform: scale(1.1);
					/*放大1.1倍*/
				}

				50% {
					transform: scale(1);
				}

				75% {
					transform: scale(1.1);
				}
			}

			.reg-picture {
				-webkit-animation-name: scaleDraw;
				/*关键帧名称*/
				-webkit-animation-timing-function: ease-in-out;
				/*动画的速度曲线*/
				-webkit-animation-iteration-count: infinite;
				/*动画播放的次数*/
				-webkit-animation-duration: 5s;
				/*动画所花费的时间*/
			}

			.reg-picture img {
				width: 58vw;
			}

			.reg-form {
				width: 80%;
				margin: 2vw auto 0 auto;
			}

			.text-box {
				align-items: center;
				border-bottom: 0.2vw solid var(--color-gray-light);
				display: flex;
				margin: 7vw auto 0 auto;
			}

			.text-box input {
				border-style: none;
				outline: none;
				background: none;
				font-size: 3vw;
				color: #4B4A48;
				margin: 0 auto;
				float: left;
				margin: 3.5vw 2vw;
				align-items: center;
			}

			#password1::-webkit-input-placeholder {
				color: var(--color-gray-light);
			}

			#password2::-webkit-input-placeholder {
				color: var(--color-gray-light);
			}

			#tel_input::-webkit-input-placeholder {
				color: var(--color-gray-light);
			}

			#ValiContainer {
				display: inline-flex;
				flex-direction: row;
				width: 100%;
				align-items: center;

			}

			.get-cap {
				text-align: right;
				float: right;
				width: 50%;
			}

			#request {
				color: var(--color-yellow);
				font-size: 3vw;
			}

			#ValidateInput::-webkit-input-placeholder {
				color: var(--color-gray-light);
			}

			i {
				color: var(--color-gray-light);
			}

			.set-btn-container {
				margin: 6vw auto 0vh auto;
				text-align: center;
			}

			.set-btn {
				width: 100%;
				height: 10vw;
				background: var(--color-yellow);
				border-radius: 9.6vw;
				border-style: none;
				color: #4b4a48;
				font-size: 3vw;
				margin-top: 6vw;
			}

			.link-area {
				display: block;
				margin-top: 4vw;
				text-align: center;
				align-items: center;
			}

			.link-area a {
				color: var(--color-gray-light);
				font-size: 3vw;
				font-weight: 200;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<img src="img/register-background.png" id="bgc">
		<div class="reg-picture">
			<img src="img/pic-register.svg" />
		</div>
		<div class="reg-form">
			<div class="text-box">
				<i class="material-icons">phone</i>
				<input id="tel_input" type="tel" class="mui-input-clear mui-input" placeholder="手机号" maxlength="11">
			</div>
			<div class="text-box" id="ValiContainer">
				<i class="material-icons">textsms</i>
				<input id="ValidateInput" type="tel" class="mui-input-clear mui-input" placeholder="验证码" maxlength="4">
				<div id="request" class="get-cap" onclick="getCaptcha()">获取验证码</div>
			</div>
			<div class="text-box">
				<i class="material-icons">lock</i>
				<input id="password1" type="password" class="mui-input-clear mui-input" maxlength="8" placeholder="密码">
			</div>
			<div class="text-box">
				<i class="material-icons">lock</i>
				<input id="password2" type="password" class="mui-input-clear mui-input" maxlength="8" placeholder="确认密码">
			</div>
			<form name="next" class="set-btn-container" onsubmit="Register();return false;" action="set-name.html">
				<button type="submit" class="set-btn">注册</button>
			</form>
			<div class="mui-content-padded">
				<div class="link-area">
					<a href="login.html">已有帐号？</a>
					<a id="Login" href="login.html">点击登陆</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
		var originalWidth = document.documentElement.clientWidth || document.body.clientWidth;
		var bgc = document.getElementById("bgc");
		bgc.style.width = originalWidth + "px";
		bgc.style.height = originalHeight + "px";
		var captGotten = 0;
		
		function time(o) {
			if (captGotten == 0) {
				o.innerText = "获取验证码";
				o.style.color = "var(--color-yellow)";
			} else {
				o.innerText = captGotten + "s";
				o.style.color = "var(--color-gray-light)";
				captGotten--;
				setTimeout(function() {
					time(o, captGotten)
				}, 1000)
			}
		}

		function getCaptcha() {
			if (captGotten || !validataPhoneNo())
				return;
			captGotten = 60;
			time(request);
			CallAJAX("getCapt", {
				"phoneNo": tel_input.value
			});
		}

		function validataPhoneNo() {
			var regMobile = /^1[3456789]\d{9}$/;
			if (tel_input.value.length == 0) {
				alert("请输入手机号");
			} else if (!regMobile.test(tel_input.value)) {
				alert("手机号输入错误");
			} else {
				return true;
			}
			return false;
		}

		function validate() {
			if (password1.value != password2.value) {
				alert("两次输入密码不同");
			} else if (tel_input.value == "" || tel_input.value == null) {
				alert("请输入手机号");
			} else if (ValidateInput.value == "" || ValidateInput.value.length < 4) {
				alert("请输入手机号");
			} else if (password1.value.length <= 0) {
				alert("请输入密码");
			} else if (ValidateInput.value.length != 4) {
				alert("验证码输入错误");
			} else if (!validataPhoneNo()) {

			} else {
				return true;
			}
			return false;
		}

		function Register() {
			if (!validate())
				return;
			// console.log(JSON.stringify({
			// 	"phoneNo": tel_input.value.toString(),
			// 	"capt": ValidateInput.value.toString(),
			// 	"pswd": password1_input.value
			// }));
			CallAJAX("doRegister", {
				"phoneNo": tel_input.value.toString(),
				"capt": ValidateInput.value.toString(),
				"pswd": password1.value
			}, function(data) {
				if (data["res"] == "1") {
					alert("手机号输入错误");
				} else if (data["res"] == "2") {
					alert("您填写的手机号已被注册");
				} else if (data["res"] == "3") {
					alert("验证码无效，请您核对收到的信息");
				} else {
					plus.storage.setItem("userHash", data["userHash"]);
					location.replace('welcome-page.html');
				}
			});
		}
	</script>
</html>
